<template>
  <div class="detail_info_wrapper">
    <div class="basic_info_title">
      <i class="point"></i>
      <span class="title_text">规则得分信息</span>
      <a-button style="margin-right: 40px;" @click="backClick">返回</a-button>
    </div>
    <div class="basic_info_container">
      <div class="info_title">医院名称</div>
      <div class="info_value">{{ rowData.orgName }}</div>
      <div class="info_title">规则类型</div>
      <div class="info_value">{{ ruleTypeLabel[rowData.ruleType] }}</div>
      <div class="info_title">数据批次</div>
      <div class="info_value">{{ rowData.batchNo }}</div>
    </div>
    <div class="basic_info_title2">
      <i class="point"></i>
      <span class="title_text">规则得分明细</span>
    </div>
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      style="
        width: 100%;
        height: calc(100% - 260px);
        margin-top: 20px;
        overflow-y: scroll;"
      tooltip-effect="light">
      <el-table-column
        prop="ruleName"
        label="规则名称"
        align="center"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="fixedWeight"
        label="规则权重"
        align="center"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="ruleName"
        label="规则描述"
        align="center"
        header-align="center">
      </el-table-column>
      <el-table-column
        prop="total"
        label="参与计算总数"
        align="center"
        header-align="center">
      </el-table-column>
      <el-table-column
        label="异常数据数"
        align="center"
        header-align="center">
        <template slot-scope="scope">
          <el-button type="text" :disabled="!scope.row.errorCount||scope.row.errorCount===0" @click="showErrorData(scope.row)">{{ scope.row.errorCount }}</el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="ruleScore"
        label="得分"
        align="center"
        header-align="center">
      </el-table-column>
    </el-table>
    <a-modal
      v-model="dialogVisible"
      width="1118px"
      title="异常数据"
      @ok="handlerOkEvent"
      @cancel="handlerCancelEvent"
      :centered="true">
      <a-table
        rowKey="key"
        :loading="dialogTableLoading"
        :columns="dialogTableColumns"
        :data-source="dialogTableData"
        :pagination="dialogTablePagination"
        :scroll="{ x: 1070, y: 325 }"
      />
    </a-modal>
  </div>
</template>

<script>
import { scoreDetail, queryErrorData } from '@/api/home'
export default {
  props: {
    rowData: {
      type: Object,
      default: () => ({
        batchNo: '',
        createTime: '',
        errorCount: 0,
        execId: '',
        execTime: '',
        fixedWeight: 0,
        formulaId: '',
        formulaName: '',
        id: '',
        notFixedScore: 0,
        orgId: '',
        orgName: '',
        passTotal: 0,
        ruleId: '',
        ruleName: '',
        ruleScore: 0,
        ruleType: '',
        ruleWeight: 0,
        total: 0,
        valErrDataId: ''
      })
    }
  },
  data () {
    const _this = this
    return {
      ruleTypeLabel: {
        1: '一致性',
        2: '完整性',
        3: '及时性',
        4: '规范性'
      },
      tableLoading: false,
      tableData: [],
      dialogVisible: false,
      dialogTableLoading: false,
      dialogTableData: [],
      dialogTableColumns: [],
      dialogTablePagination: {
        current: 1,
        pageSize: 10,
        showSizeChanger: true, // 显示可改变每页数量
        showQuickJumper: true,
        pageSizeOptions: ['10', '20', '30', '40', '50'], // 每页数量选项
        showTotal: total => `共 ${total} 条记录`, // 显示总数
        showQuickjumper: false,
        onShowSizeChange: (current, pageSize) => {
          _this.dialogTablePagination.pageSize = pageSize
          _this.dialogTablePagination.current = current
          _this.requestDialogData()
        },
        onChange: (current, pageSize) => {
          _this.dialogTablePagination.pageSize = pageSize
          _this.dialogTablePagination.current = current
          _this.requestDialogData()
        },
        total: 0
      }
    }
  },
  components: {},
  computed: {},
  watch: {
    'rowData': {
      handler (val) {
        console.log(val)
        this.requestTableData()
      },
      deep: true
    }
  },
  methods: {
    backClick () {
      this.$emit('closeDetailPage')
    },
    showErrorData (val) {
      console.log(val)
      this.dialogVisible = true
      this.valErrDataId = val.valErrDataId
      this.requestDialogData()
    },
    handlerOkEvent (e) {
      this.dialogVisible = false
      this.dialogTablePagination.current = 1
      this.dialogTablePagination.pageSize = 10
    },
    handlerCancelEvent (e) {
      this.dialogTablePagination.current = 1
      this.dialogTablePagination.pageSize = 10
    },
    requestTableData () {
      this.tableLoading = true
      scoreDetail({
        batchNo: this.rowData.batchNo,
        execTime: this.rowData.execTime,
        orgId: this.rowData.orgId,
        ruleType: this.rowData.ruleType
      }).then((res) => {
        console.log(res)
        this.tableData = res.data
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.tableLoading = false
      })
    },
    requestDialogData () {
      this.dialogTableLoading = true
      queryErrorData({
        valErrDataId: this.valErrDataId,
        pageNum: this.dialogTablePagination.current,
        pageSize: this.dialogTablePagination.pageSize
      }).then((res) => {
        const columns = []
        if (res.data.columns) {
          res.data.columns.forEach((element, index) => {
            columns.push({
              rowKey: element,
              width: 150,
              title: element,
              dataIndex: element,
              align: 'center',
              ellipsis: true
            })
          })
        }
        console.log('columns==>', columns)
        this.$set(this, 'dialogTableColumns', columns)
        // this.dialogTableColumns = columns
        this.dialogTableData = res.data.data.rows.map((item, index) => {
          return { ...item, key: index }
        })
        this.dialogTablePagination.total = res.data.data.total
      }).catch((err) => {
        console.log(err)
      }).finally(() => {
        this.dialogTableLoading = false
      })
    }
  },
  created () {},
  beforeMount () {},
  mounted () {},
  activated () {}
}
</script>

<style scoped lang="less">
.detail_info_wrapper{
  overflow: hidden;
  width: 100%;
  height: 100%;
  background:rgba(255,255,255,1);
  box-shadow:0px 3px 10px 0px rgba(96,122,151,0.13);
  border-radius:4px;
  padding: 0 42px;
  .basic_info_title{
    height: 70px;
    border-bottom: 1px solid #eff4f9;
    display: flex;
    align-items: center;
  }
  .basic_info_title2{
    height: 44px;
    border-bottom: 1px solid #eff4f9;
    display: flex;
    align-items: center;
  }
  .point{
    width:7px;
    height:7px;
    background:rgba(0,132,255,1);
    border-radius:50%;
  }
  .title_text{
    font-size:16px;
    font-weight:bold;
    color:#535353;
    margin-left: 12px;
    flex: 1;
  }

  .basic_info_container{
    height: 120px;
    display: flex;
    align-items: center;
  }
  .info_title{
    width: 11.872%;
    height: 48px;
    border: 1px solid rgba(239,243,249,1);
    background:rgba(249,251,253,1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    font-weight:400;
    color:rgba(121,135,155,1);
  }
  .info_value{
    width: 21.526%;
    height: 48px;
    border-top: 1px solid rgba(239,243,249,1);
    border-bottom: 1px solid rgba(239,243,249,1);
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-size:14px;
    font-weight:400;
    color:rgba(51,51,51,1);
  }
  .info_value:last-child{
    border-right: 1px solid rgba(239,243,249,1);
  }
}
</style>
<style lang="less">
.detail_info_wrapper{
  .el-button{
    padding: 0px;
  }
  .el-button--text{
    color: #F76359;
  }
  .el-table th{
    background: #F9FBFD;
  }
  // .el-table td, .el-table th.is-leaf{
  //   border-bottom: 1px solid #EBEEF5;
  // }
}
</style>
